<template>
  <!-- <div> -->
  <div class="s-map">
    <el-container>
      <el-header>
        <div class="s-top">
          <i class="icondizhizaihai1 iconfont local-c" >一般隐患：{{count.countYiBan}}</i>
          <i class="icondizhizaihai1 iconfont local-c" >重大隐患：{{count.countZhongDa}}</i>
          <i class="iconpaicha iconfont local-c" style="margin-left: 100px">日常排查：{{count.countRiChang}}</i>
          <i class="iconpaicha iconfont local-c">定期排查：{{count.countDingQi}}</i>
          <i class="iconpaicha iconfont local-c">专项排查：{{count.countZhuanXiang}}</i>
        </div>
      </el-header>
      <el-main class="map-main" :class="{retract: isToggleStatus}">
        <point-map class="point-map"></point-map>
      </el-main>
      <button @click="hid" class="map-btn" :class="{mapBtn: isToggleStatus}">
        <i class="el-icon-caret-bottom" v-show="!isToggleStatus"></i>
        <i class="el-icon-caret-top" v-show="isToggleStatus"></i>
      </button>
      <el-footer v-show="!isToggleStatus">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-carousel :interval="5000" indicator-position="outside" height="233px">
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="roadYinHuanChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="roadPaiChaChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8">
            <el-carousel :interval="5050" indicator-position="outside" height="233px">
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="mainYinHuanChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="mainPaiChaChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8">
            <el-carousel :interval="5100" indicator-position="outside" height="233px">
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="slopeYinHuanChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="grid-content s-grade">
                  <div ref="slopePaiChaChart" class="pie-charts"></div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>

        </el-row>


      </el-footer>
    </el-container>
  </div>
  <!-- </div> -->
</template>
<script>
import PointMap from './investigation-map'
import Format from '@/utils/format'
import {getProportionStatistics,getInvestigateTypeStatistics} from '@/services/model/investigation'

const Echarts = require('echarts')
export default {
  components: {
    PointMap
  },

  data() {
    return {
      isToggleStatus: false,
      onLinelist: '',
      myPieCharts: '',
      myBarCharts: '',
      formWarn: {
        page: 1,
        pageSize: 5,
        readFlag: 0
      },
      form: {
        page: 1,
        pageSize: 20
      },
      charts: '',
      countWarn: [],
      tableWarnList: [],
      count: {
        countRiChang: 0,
        countDingQi: 0,
        countZhuanXiang: 0,
        countYiBan: 0,
        countZhongDa: 0,
      },
    }
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
    gradeColor(val) {
      switch (val) {
        case '正常':
          return 'background-color:#0DC26B'
        case '一般隐患':
          return 'background-color:#0073b7'
        case '重大隐患':
          return 'background-color:#e43321'
        default:
          return 'background-color:#0073b7'
      }
    }
  },
  computed: {
    newDatas() {
      return this.$store.state.newDataList
    }
  },
  watch: {
    newDatas(val) {
      if (val.type === 2) { // 预警
        this.tableWarnList.unshift(val.data)
      } else { // 非预警
        this.tableList.unshift(val.data)
      }
    }
  },
  methods: {
    hid() {
      this.isToggleStatus = !this.isToggleStatus
    },
    seeDetail(row) {
      this.$router.push({
        path: '/info-mgmt'
      })
    },
    // 饼图
    pieCharts(refFlag, nameList, val, titleName) {
      this.myPieCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        title: {
          text: titleName,
          subtext: '',
          left: 'center',
          textStyle: {
            fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: nameList
        },
        series: [{
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: val,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.myPieCharts.setOption(option)
    },
    // 隐患等级占比统计
    async proportionStatistics() {
      let {data} = await getProportionStatistics()
      let mainCount = data.mainCount
      let roadCount = data.roadCount
      let slopeCount = data.slopeCount
      let main = mainCount.map(x => {
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let mainNameList = mainCount.map(x => x.typeName)
      this.pieCharts(this.$refs.mainYinHuanChart, mainNameList, main, '隐患等级数量统计')
      let road = mainCount.map(x => {
        if(x.typeName === "一般隐患"){
          this.count.countYiBan = x.num
        }else if(x.typeName === "重大隐患"){
          this.count.countZhongDa = x.num
        }
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let roadNameList = mainCount.map(x => x.typeName)
      this.pieCharts(this.$refs.roadYinHuanChart, roadNameList, road, '公路隐患等级数量统计')
      let slope = slopeCount.map(x => {
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let slopeNameList = slopeCount.map(x => x.typeName)
      this.pieCharts(this.$refs.slopeYinHuanChart, slopeNameList, slope, '边坡隐患等级数量统计')
    },
    // 排查类型占比统计
    async investigateTypeStatistics() {
      let {data} = await getInvestigateTypeStatistics()
      let mainCount = data.mainCount
      let roadCount = data.roadCount
      let slopeCount = data.slopeCount
      let main = mainCount.map(x => {
        if(x.typeName === "日常排查"){
          this.count.countRiChang = x.num
        }else if(x.typeName === "定期排查"){
          this.count.countDingQi = x.num
        }else if(x.typeName === "专项排查"){
          this.count.countZhuanXiang = x.num
        }
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let mainNameList = mainCount.map(x => x.typeName)
      this.pieCharts(this.$refs.mainPaiChaChart, mainNameList, main, '隐患排查类型数量统计')
      let road = roadCount.map(x => {
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let roadNameList = roadCount.map(x => x.typeName)
      this.pieCharts(this.$refs.roadPaiChaChart, roadNameList, road, '公路排查类型数量统计')
      let slope = slopeCount.map(x => {
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let slopeNameList = slopeCount.map(x => x.typeName)
      this.pieCharts(this.$refs.slopePaiChaChart, slopeNameList, slope, '边坡排查类型数量统计')
    },



    // echart随着窗口改变
    echartResize() {
      this.myPieCharts.resize()
      this.myBarCharts.resize()
    },
    // 获取项目，工点，监测点，监测数据计数
    async queryProjectCount() {
      let res = await projectCount()
      this.projectCounts = res.data
    }
  },
  created() {

  },
  mounted() {
    // // 监测类型占比统计
    this.proportionStatistics()
    this.investigateTypeStatistics()

    // window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
<style scoped="scoped" lang="less">
  body {
    height: 100%;
    width: 100%;
  }

  .s-map {
    line-height: 20px;
    width: 100%;
    position: relative;
    background-color: #a3ccff;
    height: 100%;

    .map-main {
      height: 64vh;
    }

    .retract {
      height: 84vh;
    }

    .point-map {
      width: 100%;
      height: 100%;
    }

    .s-left {
      width: 24.5%;
      position: absolute;
      left: 1%;
      bottom: 0;
      z-index: 1999;
    }

    .s-center {
      position: absolute;
      left: 26%;
      right: 1%;
      bottom: 0;
      height: 258px;
      z-index: 1999;

      .on-line {
        /deep/ .el-card {
          background-color: rgba(255, 255, 255, 0.7);
          font-size: 16px;
        }

        margin-bottom: 10px;
      }

      /deep/ .el-table {
        td, th {
          padding: 5px !important;
        }
      }
    }

    .s-right-2 {
      position: absolute;
      right: 1%;
      top: 100px;
      z-index: 1999;
      background-color: #1990FE;
      padding: 20px;
      border-radius: 20px;

      .pie-left {
        float: left;
        width: 50%;
      }
    }

    .pie-charts {
      height: 188px;
    }

    .collapse {
      background-color: rgba(255, 255, 255, 1);

      /deep/ .title {
        padding: 5px 10px;
      }

      /deep/ .content {
        padding: 5px 10px !important;
      }
    }

  }

  .s-white {
    color: #FFFFFF;
  }

  .grade-card {
    color: #FFFFFF;
    margin-bottom: 8px;
    font-size: 13px;
    display: inline-block;
    width: 100%;

    /deep/ .el-card__body {
      padding: 8px;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      width: 45%;
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      /deep/ .el-progress-bar__outer {
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 63px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }

  .warn-info {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .s-warning {
      font-size: 12px;
      color: white;
    }
  }

  .s-warning {
    font-size: 16px;
    color: #ffa60f;
  }

  .s-warning-not {
    font-size: 16px;
    font-weight: 600;
    color: #24e221;
    text-align: left;
  }

  .bac-color {
    background-color: #bbbbbb;
  }

  .el-table__body-wrapper {
    overflow-y: hidden;
  }

  .s-top {
    text-align: center;
    height: 50px;
    width: 100%;
    top: 0;
    background-color: rgba(43, 115, 175, 0.8);
    padding: 8px;
    border-radius: 10px;
  }

  .warn-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
  }

  .el-main {
    padding: 0px;
  }

  .el-header {
    padding: 5px;
    background-color: #1990FE;
    border-radius: 10px;
  }

  .el-footer {
    border: 2px solid rgba(43, 115, 175, 0.8);
    padding: 10px;
    height: 278px !important;
    background-color: rgba(255, 255, 255, 1);
  }

  .new-data {
    /deep/ .el-table {
      td, th {
        padding: 2px !important;
      }
    ;
    }
  }

  .local-c {
    color: white;
    font-size: 25px;
    line-height: 30px;
    margin-left: 30px;
    font-weight: 600;
  }

  .toggle {
    height: 30px !important;
  }

  .map-btn {
    font-size: 50px;
    position: absolute;
    right: 50%;
    bottom: 21%;
    color: #1990FE;
  }

  .mapBtn {
    bottom: 1%;
  }
</style>
